<template>
  <el-dialog
    :title="$t('m.Submit_Order')"
    custom-class="bus_dialog"
    :append-to-body="true"
    :modal="show"
    :visible.sync="businessChild.jiaoyiVisible"
    width="360px"
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <ul class="f-cb">
      <li>
        {{ $t("m.AccountType")
        }}<span v-if="form.assetType == 1">{{ $t("m.StandardAccount") }}</span>
        <span v-else>{{ $t("account.newJiaoyi_dialog.56hqnnyfc8k0") }}</span>
      </li>
      <li>
        {{ $t("account.newJiaoyi_dialog.56hqnnyfetc0") }}
        <span>{{ list.name }}</span>
      </li>
      <li>
        {{ $t("account.newJiaoyi_dialog.56hqnnyffdc0") }}
        <span>{{ list.symbol }}</span>
      </li>
      <li>
        {{ $t("m.direction") }}
        <span v-if="form.direction == 1" class="red">{{
          $t("account.newJiaoyi_dialog.56hqnnyffsg0")
        }}</span>
        <span v-if="form.direction == 2" class="green">{{
          $t("account.newJiaoyi_dialog.56hqnnyfg6c0")
        }}</span>
      </li>
      <li>
        {{ $t("m.OrderType") }}
        <span>{{ form.priceType | priceTypeList(te) }}</span>
      </li>
      <li>
        {{ $t("m.ExpDate") }}
        <span>{{
          form.expireType == 1
            ? $t("m.ValidDay")
            : form.expireType == 2
            ? $t("account.newJiaoyi_dialog.56hqnnyfgkk0")
            : `${form.expireDate}${$t("account.newJiaoyi_dialog.56hqq4yfhpk0")}`
        }}</span>
      </li>
      <li>
        {{ $t("m.price") }}
        <span>{{
          form.priceType == 2
            ? Number(detail.latestPrice).toFixed(detail.precision)
            : Number(form.tradePrice).toFixed(detail.precision)
        }}</span>
      </li>
      <li>
        {{ $t("m.Quantity") }} <span>{{ form.tradeNum | formatNumberRgx }}</span>
      </li>
      <li class="on">
        {{ $t("m.TotalPrice") }}<span>{{ price | formatNumberRgx }} {{detail.currency }}</span>
      </li>
      <!-- <li v-if="form.market =='US'">盘前盘后 <span>{{form.outsideRth==0?'不允许':"允许"}}</span></li> -->
    </ul>
    <div class="work">
      <!-- 融资,非平仓 -->
      <p
        v-if="
          form.tradeType == 1 &&
          form.tradePrice * form.tradeNum + brokerage > balance &&
          form.direction == 1
        "
      >
        <!-- 日息一般不超过 -->
        {{ $t("account.newJiaoyi_dialog.56hqnnyfh2w0") }}
        {{ Number(loan).toFixed(2) | formatNumberRgx
        }}{{ list.market | dateServer(te) }},{{
          $t("account.newJiaoyi_dialog.57hqq4yfhpk0")
        }}{{ Number(dailyInterest).toFixed(2) | formatNumberRgx
        }}{{ list.market | dateServer(te) }},{{
          $t("account.newJiaoyi_dialog.57hqq3fhpk0")
        }}
      </p>
      <!-- 沽空 -->
      <!-- 提示：您当前没有多头持仓，确定卖出后将作为卖空交易，卖空参考利率大致为 -->
      <p v-else-if="form.direction == 2 && form.tradeType == 2">
        {{ $t("account.newJiaoyi_dialog.57hqq4qfhpk0")
        }}{{ (shortSellFeeRate * 100).toFixed(2) }}%
      </p>
      <div v-else>
        {{ $t("account.newJiaoyi_dialog.56hqnnyfhpk0") }}
        <!-- 如果是美元，且交易价格低于1美元显示此提示 -->
        <div
          v-if="form.market == 'US' && stockInfo.detail.latestPrice < 1"
          class="teTip red"
        >
          <!-- 本订单现价低于1$，价格波动较大，无涨跌上下限，有退市风险，请谨慎交易 -->
          {{ $t("account.newJiaoyi_dialog.57hqq4qfepk0") }}
        </div>
      </div>
    </div>
    <button class="submit" @click="delayed">
      {{ $t("m.confirm_submit") }}
    </button>
  </el-dialog>
</template>
<script>
import {post_create_order, post_amend_order} from '@/assets/js/API/order.js';
export default {
  props: {
    businessChild: Object,
    detail: Object,
  },
  // inject: ["reload"],
  data() {
    return {
      show: false,
      list: {},
      form: {},
      balance: null,
      lombardRate: null,
      loading: false,
      price: 0,
      stockType: 0, // 当前交易股票，用来刷新对应市场账户信息
      loan: 0, // 借款数
      dailyInterest: 0, // 日息
      timer: null,
    };
  },
  created() {
    this.list = this.businessChild.stockList;
    this.form = this.businessChild.form;
    this.balance = Number(this.businessChild.balance);
    this.lombardRate = this.businessChild.lombardRate;
    this.brokerage = Number(this.businessChild.brokerage);
    this.shortSellFeeRate = this.businessChild.shortSellFeeRate;
    this.totalVal();
    this.loan = this.businessChild.loan;
    this.dailyInterest = this.businessChild.dailyInterest;
  },
  computed: {
    listenTrade() {
      return this.$store.state.index.listenTrade;
    },
    stockInfo() {
      return this.$store.state.index.stockInfo;
    },
  },
  methods: {
    close() {
      // 关闭交易弹窗
      this.$emit("closeClick", false);
      console.log(this.$route.name);
    },
    // 防抖
    delayed() {
      // 检测定时器
      if (this.timer) {
        // 如果有定时器,则清除
        clearTimeout(this.timer);
        this.timer = null;
      }
      // 设置定时器和事件
      this.timer = setTimeout(() => {
        console.log("chonglian");
        this.submit();
      }, 2000);
    },
    async submit() {
      // false: 新建订单，true：修改订单
      if (!this.businessChild.changeOrder) {
        const res = await post_create_order(this.form);
        if (res.code != 1) return this.$message.error(res.msg);
        this.$message.success(res.msg);
      } else {
        const res1 = await post_amend_order({
          id: this.form.id,
          amendPrice: this.form.tradePrice,
          amendNum: this.form.tradeNum,
        });
        if (res1.code != 1) return this.$message.error(res1.msg);
        this.$message.success(res1.msg);
      }
      switch (this.form.market) {
        case "HKEX":
          this.stockType = 2;
          break;
        case "US":
          this.stockType = 3;
          break;
        default:
          this.stockType = 1;
      }
      // 跳转当前股票所属的当前委托，且为报价页面
      if (this.listenTrade) {
        this.$store.dispatch("SetListenTrade", {
          flag: !this.listenTrade.flag,
          type: this.stockType,
        });
      }
      if (this.$route.name == "accountCenter") {
        this.close();
        this.$emit("hide");
        this.$emit("reset1");
      } else {
        this.$router.push({ path: "/accountCenter" });
      }
      return;
    },
    // 计算总价
    totalVal() {
      this.price =
        this.form.priceType == 2
          ? (this.detail.latestPrice * this.form.tradeNum).toFixed(3)
          : (this.form.tradePrice * this.form.tradeNum).toFixed(2);
    },
  },
};
</script>
<style lang="less" scoped>
::v-deep .bus_dialog {
  background: @sideColor;
  border-radius: 3px;
  .el-dialog__title {
    font-size: 16px;
    color: @fff;
    text-align: center;
    display: block;
  }
  h2 {
    font-size: 14px;
    color: @fff;
    position: relative;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10px;
    span {
      display: block;
      border-radius: 3px;
      height: 20px;
      img {
        margin-right: 6px;
        height: 20px;
      }
    }
  }
  ul {
    li {
      float: left;
      width: 100%;
      font-size: 14px;
      color: @fbSix;
      margin-top: 20px;
      line-height: 16px;
      span {
        float: right;
        color: @fff;
      }
    }
    li.on {
      width: 100%;
    }
  }
  h3 {
    border-top: 1px solid @Dark_gray;
    margin: 20px 0;
    padding-top: 20px;
    text-align: right;
    font-size: 14px;
    line-height: 20px;
    color: @fbSix;
    span {
      color: @fff;
      font-size: 18px;
    }
  }
  button.submit {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: @fff;
    background: @hoverColor;
    border: none;
    border-radius: 3px;
    margin-bottom: 20px;
  }
  .work {
    font-size: 12px;
    color: @fbSix;
    line-height: 20px;
    padding-top: 20px;
    p {
      word-wrap: break-word;
      word-break: normal;
    }
  }
}
.red {
  color: @red;
}
.green {
  color: @green;
}
.teTip {
  padding-top: 8px;
  font-size: 12px;
}
</style>